import React, { useState, useRef, useEffect } from 'react';
import { Form, Input, Button, message, Checkbox } from 'antd';
import { LeftOutlined, UserOutlined, LockOutlined, RightOutlined } from '@ant-design/icons';
import './Login.css';
import { useNavigate } from 'react-router-dom';

interface OutLoginProps {
  /** 按钮文字 */
  buttonText?: string;
  /** 点击事件处理 */
  onLogin?: () => void;
  /** 自定义样式 */
  style?: React.CSSProperties;
  /** 自定义类名 */
  className?: string;
  /** 返回登录页的回调函数 */
  onBack?: () => void;
}

/**
 * 校外用户登录组件
 * 
 */
const OutLogin: React.FC<OutLoginProps & { onSubmit?: (values: any) => void }> = ({ onBack, onSubmit }) => {
  const navigate = useNavigate();
  const goBackToLogin = () => {
    if (onBack) {
      onBack();
    } else {
      navigate('/');
    }
  };
  const [form] = Form.useForm();
  const handleSubmit = async (values: any) => {
    try {
      // 这里可以添加登录逻辑
      if (onSubmit) {
        onSubmit(values);
      }
    } catch (error) {
      message.error('登录失败，请检查账号密码');
    }
  };
  const handleForgotPassword = () => {
    message.info('忘记密码功能待实现');
  };

  return (
    <div className="login-container">
      {/* 右侧注册区域 */}
      <div className="login-right">
        <div className="login-header">
          <h1 className="login-title">校外用户登录</h1>
          <p className="login-welcome">欢迎登录！我们将全力为您提供贴心服务</p>
        </div>
        <div className="login-content">
          <Form
            form={form}
            layout="vertical"
            onFinish={handleSubmit}
            style={{ maxWidth: 502 }}
          >
            <Form.Item
              name="username"
              rules={[{ required: true, message: '请输入账户名' }]}
            >
              <Input
                prefix={<UserOutlined className="site-form-item-icon" style={{ color: '#b8b8b8' }} />}
                placeholder="账户"
                style={{ height: 48 }}
              />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[{ required: true, message: '请输入密码' }]}
              style={{ height: 48 }}
            >
              <Input.Password
                prefix={<LockOutlined className="site-form-item-icon" style={{ color: '#b8b8b8' }} />}
                placeholder="密码"
                style={{ height: 48 }}
              />
            </Form.Item>
            <Form.Item className="login-betwen">
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>记住密码</Checkbox>
              </Form.Item>
              <div
                className="forgot-password"
                onClick={handleForgotPassword}
              >
                忘记密码？
              </div>
            </Form.Item>
            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                className="login-button"
                style={{ width: '100%', height: 48, marginTop: 26 }}
              >
                登录
              </Button>
            </Form.Item>
          </Form>
        </div>
        {/* 登录链接 */}
        <div className="register-link-container">
          <div style={{ cursor: 'pointer' }} onClick={goBackToLogin}>
            <LeftOutlined />返回
          </div>
          <div>
            已有账户？
            <span onClick={goBackToLogin} className="register-text">
              立即登录
            </span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default OutLogin;